<template>
  <div class="aaa">
    <h2 :class="{ abc: ture, thin: flag }">组件的样式问题</h2>
    <p>这是app中的p标签</p>
    <button @click="flag = !flag">切换类名</button>
    <my-left></my-left>
  </div>
</template>

<script>
import MyLeft from "./components/MyLeft.vue";
export default {
  data() {
    return {
      flag: true,
    };
  },
  components: { MyLeft },
};
</script>

<style lang="less" scoped>
.aaa {
  background-color: blueviolet;
  .abc {
    font-size: 24px;
    color: burlywood;
  }
  .thin {
    color: peachpuff;
  }
}
p {
  color: palegreen;
}
.aaa/deep/p {
  font-size: 36px;
}
</style>